<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.css" />

    <!--需要在Javascript之前引入JQuer-->
    <script type="text/javascript" src="../static/js/jquery-1.11.0.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>

    <!--针对移动设备的样式，为了确保适当的绘制和触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--分页css-->
    <link rel="stylesheet" href="../static/css/pagination.css">
    <!--分页js-->
    <script src="../static/js/pagination.js"></script>

    <style type="text/css">
        .table-striped > tbody > tr ,.table-striped > thead > tr {
            background-color: #f9f9f9;
        }
    </style>

</head>

<body>
<div class="container">

    <div class="row">

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <div class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" name="id" id="oneId" class="form-control" placeholder="输入相关信息">
                        </div>
                        <button id="onedata" class="btn btn-default">查询</button>
                    </div>

                </div>
            </div>
            <table class="table table-striped table-hover" id="msgList" >
                <thead>
                <tr id="td">
                    <th>#</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>内容</th>
                    <th>时间</th>
                    <th>修改/删除</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div id="pages">
            </div>
        </nav>

    </div>
</div>
<!--{{/*//弹出修改窗口*/}}-->
<div id="container">
    <fieldset id="signin_menu" style="
						display: none;
						margin: 0;
						position: absolute;
						top: 30%;
						left: 50%;
						line-height: 1.5;
						">
        <form method="post" id="signin" action="/main/upmessage">
            <p>
                <label for="ID">ID&nbsp&nbsp&nbsp&nbsp;:</label>
                <input type="text" name="id" id="country" value="Norway" size="2" readonly><br>
            </p>
            <p>
                <label for="username">性名:</label>
                <input id="username" name="name" value="" title="username" tabindex="4" type="text">
            </p>
            <p>
                <label for="password">密码:</label>
                <input id="password" name="passwd" value="" title="password" tabindex="5" type="password">
            </p>
            <p>
                <label for="inputPassword3" class="col-sm-2 control-label">性别:</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="sexRadio1" value="男"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="sexRadio2" value="女"> 女
                </label>
            </p>
            <p>
            <div class="form-group">
                <label for="inputName" class="col-sm-2 control-label">内容:</label>
                <div class="col-sm-5">
                    <textarea id="content" name="content" class="form-control" rows="3" placeholder="简介......"></textarea>

                </div>
            </div>
            </p>
            <p class="remember">
                <input id="signin_submit" value="提交" tabindex="6" type="submit">
                <button id="close">关闭</button>
            </p>
        </form>
    </fieldset>
</div>



<script >
    $(function(){
        //通过Id单个查询
        $("#onedata").click(function() {
            $("#msgList tbody").empty();
            var id = $("#oneId").val();
            var url = "/main/getonemessage?id=" + id;
            $.get(url, function(data, status) {
                // alert(status);
                // var json = JSON.stringify(data);
                // alert(json);
                // alert(data.Id);
                var byId = data.Id;
                var hrfDel = "/main/delnotebyid?id="+byId;
                //  $("#tb").append("<tr id='trone'></tr>");
                  // var hrfDel = "http://127.0.0.1:8080/main/delnotebyid?id=" + byId;
                var trhtml ="<tr id='trone'>" +
                    "<td>"+data.Id+"</td>" +
                    "<td>"+data.Username+"</td>" +
                    "<td>"+data.Sex+"</td>" +
                    "<td>"+data.Content+"</td>" +
                    "<td>"+data.creatdt+"</td>" +
                    "<td><a href=\"#\" class=\"signin\">修改</a>/<a href="+hrfDel+">删除</a></td>" +
                    "</tr>";

                $("#msgList tbody").html(trhtml);

                //打开修改框
                $(".signin").click(function(e) {
                    e.preventDefault();
                    $("fieldset#signin_menu").toggle();
                    //将数据传送到修改框
                    $("#country").val(data.Id);
                    $("#username").val(data.Username);
                    $("#password").val(data.Passwd);
                    if(data.Sex === "男"){
                        $("#sexRadio1").prop("checked",true);
                        $("#sexRadio2").prop("checked",false);
                    }else{
                        $("#sexRadio1").prop("checked",false);
                        $("#sexRadio2").prop("checked",true);
                    }
                    $("#content").val(data.Content);

                });

              });
        });


    });


    pageAutoLoadData(1);


    function  pageAutoLoadData(currentPage) {

        $("#msgList tbody").empty();
        pageSize =10;
        offset = (currentPage-1)*pageSize
        offset = offset<1 ? 0 :offset;



        var messageListUrl ="/main/getmessagelist?offset="+offset+"&limit="+pageSize

        $.get(messageListUrl, function(RspData, status) {

            console.log(RspData)
            console.log(status)


            if (RspData.count>0) {
                totalPages = Math.ceil( RspData.count/pageSize)
                console.log("status",totalPages)
                new Pagination({
                    element: '#pages',
                    type: 1,
                    pageIndex: currentPage,
                    pageSize: 10,
                    total: RspData.count,
                    jumper: true,
                    singlePageHide: false,
                    prevText: '上一页',
                    nextText: '下一页',
                    disabled: true,
                    currentChange: function(index) {
                        // console.log(index);
                        pageAutoLoadData(index)
                    }
                });

            }
            console.log("status")
            var trhtml =""
            for ( var i in RspData.data) {
                var byId2 = RspData.data[i].Id;
                var hrfDel2 = "/main/delnotebyid?id=" + byId2;
                // console.log(byId2)
                trhtml += "<tr id='trone'>" +
                    "<td>"+RspData.data[i].Id+"</td>" +
                    "<td>"+RspData.data[i].Username+"</td>" +
                    "<td>"+RspData.data[i].Sex+"</td>" +
                    "<td>"+RspData.data[i].Content+"</td>" +
                    "<td>"+RspData.data[i].creatdt+"</td>" +
                    "<td><a href=\"#\" class=\"signin\">修改</a>/<a href="+hrfDel2+">删除</a></td>" +
                    "</tr>";
            }
            $("#msgList tbody").html(trhtml);
            //打开修改框
            $(".signin").click(function(e) {
                e.preventDefault();

                $("fieldset#signin_menu").toggle();
                for ( var i in RspData.data) {
                    //将数据传送到修改框
                    $("#country").val(RspData.data[i].Id);
                    $("#username").val(RspData.data[i].Username);
                    $("#password").val(RspData.data[i].Passwd);
                    if (RspData.data[i].Sex === "男") {
                        $("#sexRadio1").prop("checked", true);
                        $("#sexRadio2").prop("checked", false);
                    } else {
                        $("#sexRadio1").prop("checked", false);
                        $("#sexRadio2").prop("checked", true);
                    }

                    $("#content").val(RspData.data[i].Content);
                }

            });

            // 关闭修改框
            $("#close").click(function(c) {
                c.preventDefault();
                $("fieldset#signin_menu").toggle();

            });

        });

    }


</script>
</body>

</html>